<template>
  <div class="hezi">
    <header class="head">
        <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
        <p>发现</p>
    </header>
    <section class="erhe">
        <div class="heyi">
            <div class="_heLeft">
                <h3>金币商城</h3>
                <p>0元好物在这里</p>
                <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/" class="img1">
            </div>
            <div class="_heright">
                <div class="youyi">
                    <div class="wenzi">
                        <h3>必吃爆料</h3>
                        <p>最夯外卖指南</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/" class="img2">
                </div>
                <div class="youer">
                    <div class="wenzi">
                        <h3>推荐有奖</h3>
                        <p>5元现金拿不停</p>
                    </div> 
                    <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/" class="img3">
                </div>
            </div>
        </div>
        <div class="heer">
            <div class="cne">
                <div class="lss">
                    <h3>周边优惠</h3>
                    <p>领取口啤好卷</p>
                </div>
                <img src="https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/" class="img4">
            </div>
            <div class="_cne">
                <div class="_lss">
                    <h3>百元红包</h3>
                    <p>兴业银行联名卡</p>
                </div>
                <img src="https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/" class="img5">
            </div>
        </div>
    </section>
    <figure class="fige">
        <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/">    
    </figure>  
    <section class="biaoti">
       <div class="ti-top">
           <p></p>
           <h6>美食热推</h6>
       </div>
       <p>你的口味，我都懂得</p>
    </section>
    <section class="kouwei">
      <dl v-for='(d,g) in ds' :key="g">
         <dt><img :src="d.imgUrl" alt=""></dt>
         <dd>{{d.ming}}</dd>
         <dd>{{d.nem}}</dd>     
      </dl> 
    </section> 
     <section class="biaoti">
       <div class="ti-top">
           <p></p>
           <h6>天天特价</h6>
       </div>
       <p>特价商品，一网打尽</p>
    </section>
    <section class="kouwei">
      <dl v-for='(d,e) in dw' :key="e">
         <dt><img :src="d.imgUrl" alt=""></dt>
         <dd>{{d.ming}}</dd>
         <dd>{{d.nem}}</dd>     
      </dl> 
    </section> 
    <section class="biaoti">
       <div class="ti-top">
           <p></p>
           <h6>限时好礼</h6>
       </div>
       <p>金币换好礼</p>
    </section>
    <section class="dibu">
        <dl v-for='(a,b) in ty' :key="b">
            <dt><img :src="a.imgUrl" alt=""></dt>
            <dd>{{a.ming}}</dd>
            <dd>{{a.nem}}</dd>     
        </dl> 
    </section>
  </div>
</template>
<script>
    export default {
        data() {
            return {         
                ds : [
                    {
                        imgUrl: "https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/",
                        ming: "南昌小炒肉盖饭",
                        nem: "￥16"
                    },
                    {
                        imgUrl: "https://fus s10.elemecdn.com/a/43/9d3a88b5f5f1a14e0e6ff40d0ac4cjpeg.jpeg?imageMogr/format/webp/",
                        ming: "招牌土豆焖牛肉饭",
                        nem: "￥34.8"
                    },
                    {
                        imgUrl: "https://fuss10.elemecdn.com/2/f5/cd9c2cdc5b4cce4816a7cfcc64121jpeg.jpeg?imageMogr/format/webp/",
                        ming: "安格斯肥牛饭",
                        nem: "￥22"
                    }
                ],               
                dw : [
                    {
                        imgUrl: "https://fuss10.elemecdn.com/d/63/cc5b3f64f771715f7ac9be6ff4ea8jpeg.jpeg?imageMogr/format/webp/",
                        ming: "三鲜虾仁水饺",
                        nem: "￥13"
                    },
                    {
                        imgUrl: "https://fuss10.elemecdn.com/7/6c/8d178f0faef3f9d8f65641091e113jpeg.jpeg?imageMogr/format/webp/",
                        ming: "小米椒爱上小公鸡",
                        nem: "￥21"
                    },
                    {
                        imgUrl: "https://fuss10.elemecdn.com/7/cd/fe2fded643aab7f54f5b4c255069cjpeg.jpeg?imageMogr/format/webp/",
                        ming: "法式鸡胸肉卷咖",
                        nem: "￥16.8"
                    }
                ],                  
                ty : [
                    {
                        imgUrl: "https://fuss10.elemecdn.com/7/c5/f595b52bc6b50c9899398dccffd42jpeg.jpeg?imageMogr/format/webp/",
                        ming: "7元饿了么红包",
                        nem: "￥210金币"
                    },
                    {
                        imgUrl: "https://fuss10.elemecdn.com/8/0b/3a95765ac36e447d55409ae067b53jpeg.jpeg?imageMogr/format/webp/",
                        ming: "暖冬福利，转出...",
                        nem: "￥10金币"
                    },
                    {
                        imgUrl: "https://fuss10.elemecdn.com/d/56/8b479231309654bfa07f28999768bjpeg.jpeg?imageMogr/format/webp/",
                        ming: "阳澄湖大闸蟹礼盒",
                        nem: "￥9金币"
                    }
                ]                
            }
        }
    }
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
   .hezi{
       .head{
           width: 100%;
          .px2rem(height,100);
          background: #0033FF;
          display: flex;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 100;
          span{
              width: 13%;
              .px2rem(height,100);
              display: flex;
              justify-content: center;
              align-items: center;
              .px2rem(font-size,42);
               color: #fff;
               position: absolute;
               top: 0;
               left: 0;
          }
          p{
             width: 100%;
             .px2rem(height,100);
             .px2rem(font-size,34);
             color: #fff;
             font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
          }
       }
       .erhe{
           .px2rem(padding-top,100);
           background: #fff;
          .heyi{
              width: 100%;
              .px2rem(height,300);
              display: flex;
               border-bottom: 1px solid #ccc;
              ._heLeft{
                  flex: 1;
                  .px2rem(height,300);
                  border-right: 1px solid #ccc;
                  position: relative;
                  h3{
                      .px2rem(font-size,40);
                      font-weight: bold;
                      color: #FF9900;
                      .px2rem(padding-top,20);
                      .px2rem(padding-left,20);
                      box-sizing: border-box;
                  }
                  p{
                      .px2rem(font-size,32);
                      color: Silver;
                      line-height: 1.6;
                      .px2rem(padding-left,20);
                       box-sizing: border-box;
                  }
                  .img1{
                      .px2rem(width,180);
                      .px2rem(height,180);
                      position: absolute;
                      right: 10px;
                      bottom: 10px;
                  }
              }
              ._heright{
                  flex: 1;
                  .px2rem(height,300); 
                  .youyi{
                      width: 100%;
                      .px2rem(height,150);
                      display: flex;
                      justify-content: space-around;
                      border-bottom: 1px solid #ccc;
                      align-items: center;
                      .wenzi{
                         h3{
                             .px2rem(font-size,40);
                             color: #FF3300;
                         }
                         p{
                            .px2rem(font-size,32);
                            color: Silver;
                            line-height: 1.6;
                         }
                      }
                       .img2{
                        .px2rem(width,110);
                        .px2rem(height,110);
                    }
                  }
                  .youer{
                        width: 100%;
                      .px2rem(height,150);
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      .wenzi{
                         h3{
                             .px2rem(font-size,40);
                             color: #3333FF;
                         }
                         p{
                            .px2rem(font-size,32);
                            color: Silver;
                            line-height: 1.6;
                         }
                      }
                       .img3{
                            .px2rem(width,110);
                            .px2rem(height,110);
                        }
                  }
              }
          }
          .heer{
               width: 100%;
              .px2rem(height,150);
              display: flex;
              border-bottom: 1px solid #ccc;
              .cne{
                flex: 1;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-right: 1px solid #ccc;
                .lss{
                    h3{
                        .px2rem(font-size,40);
                        color: #FF0000;
                    }
                    p{
                        .px2rem(font-size,32);
                        color: Silver;
                       line-height: 1.6; 
                    }
                }
                .img4{
                    .px2rem(width,110);
                    .px2rem(height,110);
                }
              }
               ._cne{
                flex: 1;
                display: flex;
                justify-content: space-around;
                align-items: center;
                ._lss{
                    h3{
                        .px2rem(font-size,40);
                        color: #FFCC66;
                    }
                    p{
                        .px2rem(font-size,32);
                        color: Silver;
                       line-height: 1.6; 
                    }
                }
                .img5{
                    .px2rem(width,110);
                    .px2rem(height,110);
                }
              }
          }
       }
       .fige{
           width: 100%;
           .px2rem(height,200);
           background: #ccc;
           display: flex;
           align-items: center;
           img{
               width: 100%;
               .px2rem(height,170);
           }
       }
       .biaoti{
           width: 100%;
           .px2rem(height,100);
           .ti-top{
               width: 100;
               .px2rem(height,70);
               display: flex;
               align-items: center;
               justify-content: center;
               position: relative;
               p{
                   width:30%;
                   border: 1px solid #000;
               }
               h6{
                   .px2rem(font-size,34);
                   font-weight: bold;
                   color: #000;
                   position: absolute;
                   top: 28%;
                   left: 40%; 
                   background: #fff;
               }
           }
           p{
               .px2rem(font-size,28);
               color: #ccc;
               text-align: center;
           }

       }
       .kouwei,.dibu{
           width: 100%;
           display: flex;
           dl{
               flex: 1;
               .px2rem(height,240);
               .px2rem(padding-top,12);
               dt{  
                   text-align: center;
                   img{
                     .px2rem(width,186);
                     .px2rem(height,170);
                   }
               }
               dd{
                   .px2rem(font-size,29);
                   .px2rem(padding-left,16);
                   box-sizing: border-box;
               }
               dd:last-child{
                   color: #FF0000;
                   line-height: 1.6;
                  font-weight: bold;
               }
           }
       }
       .dibu{
           .px2rem(padding-bottom,140)
       }
   }
</style>
